<template>
    <div class="container" ref="container">

        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component"/>
            </keep-alive>
        </router-view>

        <van-tabbar v-model="active" active-color="#f5b1b8" @change="onChange">
            <van-tabbar-item icon="home-o" name="home">主页</van-tabbar-item>
            <van-tabbar-item icon="star" name="fav">收藏</van-tabbar-item>
            <van-tabbar-item icon="friends-o" name="profile">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>



import { ref} from "vue";
import router from "@/router";
export default {
    name: "main_page",
    // components:{
    //   home,
    //   fav,
    //   profile
    // },
    setup() {
        const active = ref('home')

        const onChange = (index) => {
            if (index == "home") {
                router.push({path: '/main/home'})
            } else if (index == 'fav') {
                router.push({path: '/main/fav'})
            } else {
                router.push({path: '/main/profile'})
            }
        };

        return {
            active,
            onChange,
        }
    },
    methods: {
        setContainer() {
            let width = document.documentElement.clientWidth;
            this.$refs.container.style.width = width + 'px';
        },
    },
    mounted() {
        this.setContainer()
    },
    activated() {
        console.log("mainPage is act")
    },
    deactivated() {
        console.log("mainPage is deact")
    }

}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;

}

.topper {
    position: relative;
    width: 100%;
    height: 10%;
    display: flex;
    bottom: 0;
    background-color: red;
}
</style>